<!doctype html><html><head><meta charset="utf-8">
    <title>Mis Películas</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <style>
        body { --primary: #6200ee; --secondary: #29b6f6; margin: 0px;}
        * {font-family: 'Roboto', sans-serif;}
        button { 
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            text-decoration: none;
            margin: 2px;
            color: var(--primary);
            background: white;
            border: 1px solid var(--primary);
            height: 20px;
            font-size: 9px;
            text-transform: uppercase;
            cursor: pointer;
            transition: ease-in 0.2s all;
            padding: 0 8px 0 8px;
        }
        div#main {padding: 10px;}
        input {margin-bottom: 5px; margin-top: 2px; padding: 4px; font-size: 12px; }
        h1 {background: var(--primary); color: white; font-weight: 300; text-transform: uppercase; font-size: 20px; margin: 0px; padding: 15px;}
        h2 { margin-block-start: 0px; margin-block-end: 10px; font-size: 20px;  color: var(--primary);}
        button:hover { background: var(--primary); color: white; }
        div.actions { margin-top: 10px;}
        div.movie {display: inline-block; width: auto; padding: 10px; box-shadow: 2px 2px 7px #ccc; margin: 5px;}
        div.movie div.movie-img {width: 200px; height: auto; min-height: 200px; cursor: pointer;}
        div.movie div.movie-img img {width: 100%; height: auto;}
        div.movie div.title {text-align: center; overflow: hidden; text-overflow: ellipsis; width: 200px; white-space: nowrap; }
        div.field {color: var(--primary); text-transform: uppercase; font-size: 12px;}
    </style>

    <script type="text/javascript">

        // MODELO DE DATOS

        let mis_peliculas_iniciales = [
            {titulo: "Superlópez",   director: "Javier Ruiz Caldera", "miniatura": "files/superlopez.png"},
            {titulo: "Jurassic Park", director: "Steven Spielberg", "miniatura": "files/jurassicpark.png"},
            {titulo: "Interstellar",  director: "Christopher Nolan", "miniatura": "files/interstellar.png"}
        ];

        localStorage.mis_peliculas = localStorage.mis_peliculas || JSON.stringify(mis_peliculas_iniciales);

        // VISTAS
        const indexView = (peliculas) => {
            let i=0;
            let view = "";

            while(i < peliculas.length) {
              view += `
                <div class="movie">
                   <div class="movie-img">
                        <img data-my-id="${i}" src="${peliculas[i].miniatura}" onerror="this.src='files/placeholder.png'"/>
                   </div>
                   <div class="title">
                       ${peliculas[i].titulo || "<em>Sin título</em>"}
                   </div>
                   <div class="actions">
                        <!--Insertar aquí botones de "Show" y "Delete"-->
                       <button class="edit" data-my-id="${i}">editar</button>
                       <button class="show" data-my-id="${i}">ver</button>
                       <button class="delete" data-my-id="${i}">borrar</button>
                    </div>
                </div>\n`;
              i = i + 1;
            };

            view += `<div class="actions">
                        <!--Insertar aquí botones de "Añadir" y "Reset"-->
                        <button class="new" data-my-id="${i}">añadir</button>
                        <button class="reset" data-my-id="${i}">reset</button>
                    </div>`;

            return view;
        };

        const editView = (i, pelicula) => {
            return `<h2>Editar Película </h2>
                <div class="field">
                Título <br>
                <input  type="text" id="titulo" placeholder="Título" 
                        value="${pelicula.titulo}">
                </div>
                <div class="field">
                Director <br>
                <input  type="text" id="director" placeholder="Director" 
                        value="${pelicula.director}">
                </div>
                <div class="field">
                Miniatura <br>
                <input  type="text" id="miniatura" placeholder="URL de la miniatura" 
                        value="${pelicula.miniatura}">
                </div>
                <div class="actions">
                    <button class="update" data-my-id="${i}">
                        Actualizar
                    </button>
                    <button class="index">
                        Volver
                    </button>
               `;
        }

        const showView = (pelicula) => {
            // Completar: genera HTML con información de la película
            // ...

            return `
             <p>   
                La película <b> ${pelicula.titulo}</b> fue
                dirigida por <b> ${pelicula.director}</b>!
             </p>
             <div class="actions">
                <button class="index">Volver</button>
             </div>`;
        }

        const newView = () => {
            // Completar: genera formulario para crear nuevo quiz
            // ...

            return `<h2>Crear Película</h2>
            <div class="field">
                Título <br>
                <input  type="text" id="titulo" placeholder="Título" 
                        value="">
                </div>
                <div class="field">
                Director <br>
                <input  type="text" id="director" placeholder="Director" 
                        value="">
                </div>
                <div class="field">
                Miniatura <br>
                <input  type="text" id="miniatura" placeholder="URL de la miniatura" 
                        value="">
                </div>
                <div class="actions">
                    <button class="create">
                        Crear
                    </button>

                <div class="actions">
                    <button class="index">Volver</button>
                </div>`;
        }


        // CONTROLADORES 
        const indexContr = () => {
            let mis_peliculas = JSON.parse(localStorage.mis_peliculas);
            document.getElementById('main').innerHTML = indexView(mis_peliculas);
        };

        const showContr = (i) => {
            // Completar: controlador que muestra la vista showView(pelicula)
            // ...
            let pelicula = JSON.parse(localStorage.mis_peliculas)[i];
            document.getElementById('main').innerHTML = showView(pelicula);
        };

        const newContr = () => {
            // Completar: controlador que muestra la vista newView()
            // ...
            document.getElementById("main").innerHTML = newView()
        };

        const createContr = () => {
            // Completar: controlador que crea una película nueva en el modelo guardado en localStorage
            // ...
            let mis_peliculas = JSON.parse(localStorage.mis_peliculas);
            mis_peliculas.push({titulo:document.getElementById('titulo').value,
             director:document.getElementById('director').value,
             miniatura:document.getElementById('miniatura').value});
            localStorage.mis_peliculas = JSON.stringify(mis_peliculas);
            indexContr();
        };

        const editContr = (i) => {
            let pelicula = JSON.parse(localStorage.mis_peliculas)[i];
            document.getElementById('main').innerHTML = editView(i, pelicula);
        };

        const updateContr = (i) => {
            let mis_peliculas = JSON.parse(localStorage.mis_peliculas);
            mis_peliculas[i].titulo    = document.getElementById('titulo').value;
            mis_peliculas[i].director  = document.getElementById('director').value;
            mis_peliculas[i].miniatura = document.getElementById('miniatura').value;
            localStorage.mis_peliculas = JSON.stringify(mis_peliculas);
            indexContr();
        };

        const deleteContr = (i) => {
            // Completar:  controlador que actualiza el modelo borrando la película seleccionada
            // Genera diálogo de confirmación: botón Aceptar devuelve true, Cancel false
            if(confirm("¿Quieres borrar esta película?")){
            let mis_peliculas = JSON.parse(localStorage.mis_peliculas);
            mis_peliculas.splice(i,1);
            localStorage.mis_peliculas = JSON.stringify(mis_peliculas);
            indexContr();
            }
        };

        const resetContr = () => {
            // Completar:  controlador que reinicia el modelo guardado en localStorage con las películas originales
            let mis_peliculas = JSON.parse(localStorage.mis_peliculas);
            mis_peliculas = mis_peliculas_iniciales;
            localStorage.mis_peliculas = JSON.stringify(mis_peliculas);
            indexContr();
        };

        // ROUTER de eventos
        const matchEvent = (ev, sel) => ev.target.matches(sel);
        const myId = (ev) => Number(ev.target.dataset.myId);

        document.addEventListener('click', ev => {
            if      (matchEvent(ev, '.index'))  indexContr  ();
            else if (matchEvent(ev, '.edit'))   editContr   (myId(ev));
            else if (matchEvent(ev, '.update')) updateContr (myId(ev));
            // Completar añadiendo los controladores que faltan
            else if (matchEvent(ev, '.show'))   showContr   (myId(ev));
            else if (matchEvent(ev, '.delete'))   deleteContr   (myId(ev));
            else if (matchEvent(ev, '.new'))   newContr   (myId(ev));
            else if (matchEvent(ev, '.create'))   createContr   (myId(ev));
            else if (matchEvent(ev, '.reset'))   resetContr   (myId(ev));
        })
        
        
        // Inicialización        
        document.addEventListener('DOMContentLoaded', indexContr);
    </script>
</head>

<body>

    <h1>Mis Películas Favoritas</h1>
    <div id="main"> <!-- La vista se incluye aquí --> </div>
    
</body>
</html>


